<template>
	<view class="container">
		<view class="search">
			<view class="search-box" @click="handlesearch">
				<image src="../../static/ss.png" mode=""></image>
				<text>搜索</text>
			</view>
		</view>
		<view class="swiper">
			<u-swiper :list="bannerList" mode="none" height="420" @click="handleswiper"></u-swiper>
		</view>
		<view class="noticeBar">
			<view class="noticeBar-image">
				<image src="http://hmh-app.oss-cn-beijing.aliyuncs.com/webStorage/web_16919962814016833.png" mode=""></image>
			</view>
			<view class="noticeBar-view">
				<u-notice-bar mode="horizontal" :list="noticeList" :volume-icon="false" :more-icon="false"
					bg-color="#ACA7D9" color="#ffffff" font-size="32" padding="0rpx 0rpx"></u-notice-bar>
			</view>
		</view>
		<view class="category">
			<view class="category-item" @click="handlehaimeishangcheng">
				<image src="http://hmh-app.oss-cn-beijing.aliyuncs.com/webStorage/web_16919963294961898.png" mode=""></image>
				<text>嗨美商城</text>
			</view>
			<view class="category-item" @click="handletishengzhinan">
				<image src="http://hmh-app.oss-cn-beijing.aliyuncs.com/webStorage/web_169199634226289.png" mode=""></image>
				<text>提升指南</text>
			</view>
			<view class="category-item" @click="handlechengweihuiyuan">
				<image src="http://hmh-app.oss-cn-beijing.aliyuncs.com/webStorage/web_16919963525872375.png" mode=""></image>
				<text>成为会员</text>
			</view>
			<view class="category-item" @click="handleguanyuwomen">
				<image src="http://hmh-app.oss-cn-beijing.aliyuncs.com/webStorage/web_169199637337325.png" mode=""></image>
				<text>关于我们</text>
			</view>
		</view>
		<!-- <view class="gg">
			<view class="gg-top">
				<view class="gg-top-item">
					<image class="gg-top-item-image" src="../../static/fxsl.png" mode=""></image>
					<view class="gg-top-item-view">
						<view class="gg-top-item-view-left">
							<text class="gg-top-item-view-left-text">分享/转发/收藏3人领取</text>
							<text class="gg-top-item-view-left-text1">12月12日00：00-24：00付款成功专享 </text>
						</view>
						
					</view>
				</view>
				<view class="gg-top-item">
					<image class="gg-top-item-image" src="../../static/zkhl.png" mode=""></image>
					<view class="gg-top-item-view">
						<view class="gg-top-item-view-left">
							<text class="gg-top-item-view-left-text">0-1点限时75折</text>
							<text class="gg-top-item-view-left-text1">12月20日00：00-24：00付款前专享 </text>
						</view>
				        <image src="../../static/sy_10.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="gg-bottom">
				<view class="gg-bottom-item">
					<view class="gg-bottom-item-name">充200得250</view>
					<view class="gg-bottom-item-content">
						<view class="gg-bottom-item-content-text">（可叠加各类优惠劵 随充随退） </view>
						<view class="gg-bottom-item-content-btn">
							立即充值
						</view>
					</view>
				</view>
				<view class="gg-bottom-item">
					<view class="gg-bottom-item-name">充500得650</view>
					<view class="gg-bottom-item-content">
						<view class="gg-bottom-item-content-text">（可叠加各类优惠劵 随充随退） </view>
						<view class="gg-bottom-item-content-btn">
							立即充值
						</view>
					</view>
				</view>
			</view>
		</view> -->
		
        <view class="box">			
			<block v-if="groupList.length > 0">
				<view class="box-name"><view class="title-tag"></view>拼团</view>
				<view class="box-line"></view>
				<groupList :list="groupList"></groupList>
			</block>
			
			<view class="box-name"><view class="title-tag"></view>关于我们</view>
			<view class="box-line"></view>
			<image style="width:100%;height: 250rpx;" src="https://hmh-app.oss-cn-beijing.aliyuncs.com/about-us.png" mode=""></image>
			
			
			<view class="box-name"><view class="title-tag"></view>热门推荐</view>
			<view class="box-line"></view>
        	<goodsList :list="list"></goodsList>
			<view class="loadmore" v-if="isLoadmore">
				<u-loadmore :status="status" :icon-type="flower"/>
			</view>
        </view>
		
		<button open-type="contact" class="box-xuanfu">
			<image src="../../static/kf_wx@2x.png" mode="" ></image>
		</button>
		<u-mask :show="showkefu">
			<view class="warp1">
				<image class="warp1-image" src="https://five-palace.oss-cn-hangzhou.aliyuncs.com/loveFruit/167142070661361.png" mode=""></image>
				<view class="warp1_view">
					<image class="warp1-image1" src="../../static/fx_gb.png" mode="" @click="handleclose"></image>
					<image class="warp1-image1" src="../../static/fx_bd@2x.png" mode="" @click="saveShareImg()"></image>
				</view>
			</view>
		</u-mask>
		<view class="preview-full" v-if="isOpenVideo">
			<video id="myVideo" class="video" :src="videoUrl" :autoplay="true" @fullscreenchange="fullscreenchange"></video>
		</view>
		<image v-if="isTishi" @click="handleHide" src="../../static/ts@2x.png" class="tishi"  mode=""></image>
		<u-tabbar :list="tabbar" :mid-button="false" icon-size='45' active-color="#3E3E3E" inactive-color="#3E3E3E" :before-switch="beforeSwitch"></u-tabbar>
	</view>
</template>

<script>
	const QQMapWX = require('../../common/qqmap-wx-jssdk.js')
	const qqmapsdk = new QQMapWX({
	    key: '4FOBZ-LO2WK-EG3JV-AWWDD-OJQTT-R7BFB' // 必填
	})
	export default {
		data() {
			return {
				bannerList:[],
				loading:false,
				list:[],
				groupList:[],
				tabbar:[{
						iconPath: "/static/tab_sy_1.png",
						selectedIconPath: "/static/tab_sy_2.png",
						text: '首页',
						pagePath: "/pages/index/index"
					},{
						iconPath: "/static/tab_fl_1.png",
						selectedIconPath: "/static/tab_fl_2.png",
						text: '嗨美商城',
						pagePath: "/pages/fenlei/fenlei"
					},
					{
						iconPath: "/static/tab_gwd_1.png",
						selectedIconPath: "/static/tab_gwd_2.png",
						text: '购物车',
						count: 0,
						isDot: false,
						customIcon: false,
						pagePath: "/pages/gouwudai/gouwudai"
					},
					{
						iconPath: "/static/tab_wd_1.png",
						selectedIconPath: "/static/tab_wd_2.png",
						text: '会员中心',
						pagePath: "/pages/wode/wode"
					},
				],
				isflag:true,
				isTishi:true,
				content:'',
				show:false,
				showkefu:false,
				noticeList:[],
				page:1,
				size:10,
				pageTotal:'',
				showEmpty:false,
				status: 'loading',
				isLoadmore:true,
				isLogin:'',
				isBtn:0,
				share:uni.getStorageSync('share')
			}
		},
		onLoad(options) {
			if (uni.getStorageSync('isXianshi')) {
				this.isTishi = false
			}else{
				this.isTishi = true
			}
			if (!uni.getStorageSync('recodeCode')) {
				if (options.scene) {
					const recodeCode = decodeURIComponent(options.scene)
					console.log(recodeCode)
					uni.setStorageSync('recodeCode',recodeCode)
				}
				if(options.recodeCode){
					uni.setStorageSync('recodeCode',options.recodeCode)
				}
			}
			
			this.getHomeSlideshow()
			this.getHomeRecommendGoodsList()
			this.getHomeGroupGoodsList();
			this.getisLogin()
		},
		onShow() {
			this.getCartCount()
			this.getNoticeList()
		},
		methods: {
			//点击轮播图
			handleswiper(index){
				if (this.bannerList[index].jumpUrl) {
					const params = 'goodsId=' + this.bannerList[index].jumpUrl
					uni.navigateTo({
						url:'/pages/shangpinxiangqing/shangpinxiangqing?' + params
					})
				}
			},
			//分类商品
			handlegoods(data){
				const params = 'categoryId=' + data.categoryId + '&categorynNme=' + data.categorynNme
				uni.navigateTo({
					url:'/pages/fenleishangpin/fenleishangpin?' + params
				})
			},
			//购物袋数量
			async getCartCount(){
				const res = await this.$u.api.getCartCount()
				console.log(res,'购物车数量')
				this.tabbar[2].count = res.data
			},
			//轮播图
			async getHomeSlideshow(){
				const res = await this.$u.api.getHomeSlideshow()
				this.bannerList = res.data
				this.bannerList.forEach(v=>{
					v.image = v.imgUrl
				})
			},
			//公告
			async getNoticeList(){
				const params = {
					page:1,
					size:10
				}
				const res = await this.$u.api.getNoticeList(params)
				this.noticeList = []
				res.rows.forEach(v=>{
					this.noticeList.push(v.title)
				})
				
			},
			//商品
			async getHomeRecommendGoodsList(data){
				const params = {
					page:this.page,
					size:this.size
				}
				const res = await this.$u.api.getHomeRecommendGoodsList(params)
				if (data == 1) {
					this.list = res.rows
				}else{
					this.list = [...this.list,...res.rows]
				}
				this.pageTotal = Math.ceil(res.total / this.size)
				if (res.total < 10) {
					this.isLoadmore = false
				}
				this.status = 'nomore'
				uni.stopPullDownRefresh()
			},
			async getHomeGroupGoodsList(data){
				const params = {
					// page:this.page,
					// size:this.size
				}
				const res = await this.$u.api.getHomeGroupGoodsList(params);
				console.log('res.data',res.data)
				this.groupList = res.data
				// uni.stopPullDownRefresh()
			},
			
			//隐藏提示
			handleHide(){
				this.isTishi = false
				uni.setStorageSync('isXianshi', '1');
			},
			//判断是否登录
			async getisLogin(){
				const res = await this.$u.api.isLogin()
				this.isLogin = res.data
			},
			//切换之前回调
			async beforeSwitch(index){
				if (index == 2 || index == 3) {
					const res = await this.$u.api.getUserInfo()
					return true
				}
			},
			async getUserInfo(){
				const res = await this.$u.api.getUserInfo()
				return true
			},
			//搜索
			handlesearch(){
				const params = 'content=' + this.content + '&type=' + 0
				uni.navigateTo({
					url:'/pages/xinfenleishangpin/xinfenleishangpin?' + params
				})
				
			},
			//嗨美商城
			handlehaimeishangcheng(){
				uni.switchTab({
					url:'/pages/fenlei/fenlei'
				})
			},
			//提成指南
			handletishengzhinan(){
				uni.navigateTo({
					url:'/pages/tishengzhinan/tishengzhinan'
				})
			},
			//成为会员
			handlechengweihuiyuan(){
				uni.navigateTo({
					url:'/pages/chengweihuiyuan/chengweihuiyuan'
				})
			},
			//关于我们
			handleguanyuwomen(){
				uni.navigateTo({
					url:'/pages/guanyuwomen/guanyuwomen'
				})
			},
			//关闭客服
			handleclose(){
				this.showkefu = false
			},
			// 保存到系统相册
			saveShareImg() {
				var that = this
				uni.authorize({
				    /* 这个就是保存相册的 */
				    scope: 'scope.writePhotosAlbum',
				    success() {
				        /* 保存图片方法 */
				        that.img();
						
				    },
				    complete(res) {
				        console.log(res);
				        /* 这里判断一下如果没有授权重新打开设置选项 */
				        uni.getSetting({
				            success(res) {
				                if (!res.authSetting['scope.writePhotosAlbum']) {
				                    /* 打开设置的方法 */
				                    that.opensit();
				                }
				            }
				        });
				    }
				})				
			},
			opensit() {
			    uni.showModal({
			        content: '由于您还没有允许保存图片到您相册里,这无法进行分享操作点击确定去允许授权',
			        success: function(res) {
			            if (res.confirm) {
			                /* 这个就是打开设置的API*/
			                uni.openSetting({
			                    success(res) {
			                        console.log(res.authSetting);
			                    }
			                });
			            } else if (res.cancel) {
			                uni.showModal({
			                    cancelText: '依然取消',
			                    confirmText: '重新授权',
			                    content: '很遗憾你点击了取消，这将无法进行分享操作，请慎重考虑',
			                    success: function(res) {
			                        if (res.confirm) {
			                            uni.openSetting({
			                                success(res) {
			                                    console.log(res.authSetting);
			                                }
			                            });
			                        } else if (res.cancel) {
			                            console.log('用户不授权');
			                        }
			                    }
			                });
			            }
			        }
			    });
			},
			img() {
				var that = this
			    /* 获取图片信息 */
			    uni.getImageInfo({
			        src: 'https://five-palace.oss-cn-hangzhou.aliyuncs.com/loveFruit/167142070661361.png',
			        success: function(image) {
			            /* 保存图片到相册 */
			            uni.saveImageToPhotosAlbum({
			                filePath: image.path,
			                success: function() {
			                    console.log('save success');
								uni.showModal({
									title: '保存成功',
									content: '图片已成功保存到相册',
								});
								that.showkefu = false
			                },
			                complete(res) {
			                    console.log(res);
			                }
			            });
			        }
			    });
			},
			
		},
		//下拉刷新
		onPullDownRefresh(){
			this.page = 1
			this.getHomeRecommendGoodsList(1)
		},
		//向上加载
		onReachBottom() {
			this.page = this.page + 1
			if (this.page <= this.pageTotal) {
				this.isLoadmore = true
				this.status = 'loading';
				setTimeout(()=>{
					this.getHomeRecommendGoodsList()
				},600)
			} else{
				
			}
		},
	}
</script>
<style>
	.u-badge--bg--error.data-v-2b1712d8{
		background: #5D22BA !important;
	}
	page{
		width: 100%;
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	.container{
		width: 100%;
		height: 100%;
		background: url('http://yeliao-yinyu.oss-cn-beijing.aliyuncs.com/webStorage/web_16914879952117253.png') no-repeat;
		background-size: 100% 100%;
	}
	.search{
		padding: 20rpx 28rpx;
	}
	.search-box{
		width: 694rpx;
		height: 82rpx;
		border-radius: 36rpx 36rpx 36rpx 36rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		background: #F6F6F6;
	}
	.search-box image{
		width: 26rpx;
		height: 21rpx;
	}
	.search-box text{
		padding-left: 8rpx;
		font-size: 32rpx;
		font-family: Resource Han Rounded CN;
		font-weight: 400;
		color: #B4D2FD;
		line-height: 36rpx;
	}
	.swiper{
		
	}
	.noticeBar{
		width: 750rpx;
		height: 80rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		background: #ACA7D9;
		margin-top: 24rpx;
	}
	.noticeBar-image{
		width: 90rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	.noticeBar-image image{
		width: 42rpx;
		height: 32rpx;
	}
	.noticeBar-view{
		width: 660rpx;
	}
	.category{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 28rpx;
		background: #ffffff;
		margin-top: 24rpx;
	}
	.category-item{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.category-item image{
		width: 108rpx;
		height: 108rpx;
	}
	.category-item text{
		padding-top: 20rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #524557;
		line-height: 28rpx;
	}
	.gg{
		margin-top: 24rpx;
		width: 100%;
		background: url('http://yeliao-yinyu.oss-cn-beijing.aliyuncs.com/webStorage/web_16915465124556856.png') no-repeat;
		background-size: 100% 100%;
		padding: 36rpx 28rpx;
	}
	.gg-top{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.gg-top-item{
		background: url('http://yeliao-yinyu.oss-cn-beijing.aliyuncs.com/webStorage/web_16915491020175208.png') no-repeat;
		background-size: 100% 100%;
		width: 334rpx;
	}
	.gg-top-item-image{
		width: 160rpx;
		height: 48rpx;
	}
	.gg-top-item-view{
		padding: 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.gg-top-item-view-left{
		display: flex;
		flex-direction: column;
	}
	.gg-top-item-view-left-text{
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #010000;
		line-height: 32rpx;
	}
	.gg-top-item-view-left-text1{
		padding-top: 14rpx;
		font-size: 18rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #010000;
		line-height: 20rpx;
	}
	.gg-top-item-view image{
		width: 48rpx;
		height: 48rpx;
		margin-left: 10rpx;
	}
	.gg-bottom{
		margin-top: 28rpx;
		padding: 28rpx 0rpx;
		background: url('http://yeliao-yinyu.oss-cn-beijing.aliyuncs.com/webStorage/web_16915466368383250.png') no-repeat;
		background-size: 100% 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.gg-bottom-item{
		display: flex;
		flex-direction: column;
		padding: 0rpx 20rpx;
	}
	.gg-bottom-item-name{
		font-size: 48rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #010000;
		line-height: 48rpx;
	}
	.gg-bottom-item-content{
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-top: 14rpx;
	}
	.gg-bottom-item-content-text{
		font-size: 18rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #010000;
		line-height: 28rpx;
	}
	.gg-bottom-item-content-btn{
		background: url('http://yeliao-yinyu.oss-cn-beijing.aliyuncs.com/webStorage/web_16915470205954860.png') no-repeat;
		background-size: 100% 100%;
		width: 146rpx;
		height: 32rpx;
		text-align: center;
		font-size: 20rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 32rpx;
		margin-left: 20rpx;
	}
	.box{
		padding: 12rpx 28rpx 20rpx 28rpx;
	}
	.box-name{
		text-align: center;
		font-size: 50rpx;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		color: #7616B3;
		line-height: 60rpx;
		padding: 30rpx 0rpx 20rpx 0rpx;
		display: flex;
	}
	.box-line{
		height: 2rpx;
		width:100%;
		background-color: #7616B3;		
	}
	.title-tag{
		margin-top: 4rpx;
		width: 6rpx;
		height:56rpx;
		background-color: #7616B3;
		margin-right: 16rpx;
	}
	.tishi{
		width: 462rpx;
		height: 94rpx;
		position: fixed;
		top: 0rpx;
		right:14rpx;
		z-index: 1000;
	}
	
	.preview-full {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		z-index: 1002;
	}
	.preview-full video {
		width: 100%;
		height: 100%;
		z-index: 1002;
	}
	
	.box-xuanfu{
		display: flex;
		flex-direction: column;
		position: fixed;
		right: 15rpx;
		bottom: 300rpx;
		background: none;
		margin: 0;
	}
	.box-xuanfu::after{
		border: none;
	}
	.box-xuanfu image{
		width: 88rpx;
		height: 88rpx;
	}
	
	.warp1 {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.warp1-image{
		width: 500rpx;
		height: 660rpx;
		border-radius: 10px;
	}
	.warp1-image1{
		width: 88rpx;
		height: 88rpx;
		margin-top: 38rpx;
	}
	.warp1_view{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		width: 500rpx;
	}
	
</style>
